<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" v-show="showSearch">
      <el-form-item label="标题">
        <el-input
          v-model="courseQuery.title"
          size="small"
          clearable
          placeholder="请输入课程标题"
        />
      </el-form-item>
      <el-form-item label="工种">
        <el-cascader
          size="small"
          v-model="courseQuery.subjectId"
          :options="typeList"
          placeholder="默认全部"
          :props="{
            value: 'id',
            label: 'courseName',
            children: 'childrenList',
            expandTrigger: 'hover',
          }"
          :show-all-levels="false"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="职级">
        <el-select
          v-model="courseQuery.gradeId"
          clearable
          placeholder="默认全部"
          size="small"
        >
          <el-option
            v-for="item in gradeList"
            :key="item.id"
            :label="item.grade"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路线">
        <el-select
          v-model="courseQuery.kind"
          clearable
          placeholder="默认全部"
          size="small"
        >
          <el-option
            v-for="item in kindList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="courseQuery.type"
          clearable
          placeholder="默认全部"
          size="small"
        >
          <el-option label="理论" value="理论"></el-option>
          <el-option label="实操" value="实操"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="getList()"
          >查询</el-button
        >
        <el-button type="default" size="small" @click="resetData()"
          >清空</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格上方按钮 -->
    <div>
      <div style="float: left; margin-bottom: 10px">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="addCourse()"
          >新增课程</el-button
        >
      </div>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        style="float: right"
      ></right-toolbar>
    </div>

    <!-- 表格 -->
    <el-table
      :data="list"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      height="75vh"
    >
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="videoCourse.title" label="标题" />
      <el-table-column label="适用工种" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- {{ scope.row.subjectParent + "-" + scope.row.subject }} -->
          {{ scope.row.subject }}
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="职级" />
      <!-- 学习路线：0-新型学徒，1-重点用工 -->
      <el-table-column prop="videoCourse.kind" label="学习路线">
        <template slot-scope="scope">
          <span v-if="scope.row.videoCourse.kind === '0'">新型学徒</span>
          <span v-else-if="scope.row.videoCourse.kind === '1'">重点用工</span>
          <span v-else-if="scope.row.videoCourse.kind === '2'">技能提升</span>
        </template>
      </el-table-column>
      <!-- 课程类型 type-->
      <el-table-column prop="videoCourse.type" label="课程类型">
      </el-table-column>
      <!-- 简介，溢出隐藏 -->
      <el-table-column
        prop="videoCourse.description"
        label="简介"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="videoCourse.lessonNum" label="总课时" />
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.videoCourse.cover" width="80" height="50" />
        </template>
      </el-table-column>

      <el-table-column
        prop="videoCourse.viewCounts"
        label="播放量" 
        :show-overflow-tooltip="true"
        >
      </el-table-column>

      <!-- 显示课程发布机构名称 -->
      <!-- <el-table-column prop="videoCourse.companyName" label="发布公司" v-if="showCompany"/> -->

      <el-table-column
        prop="videoCourse.gmtCreate"
        label="添加时间"
        :show-overflow-tooltip="true"
      />

      <el-table-column label="课程状态" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.videoCourse.status === "Normal" ? "已发布" : "未发布" }}
          <el-button
            type="primary"
            size="small"
            plain
            v-show="scope.row.videoCourse.status === 'Draft'"
            @click="publihCourse(scope.row.videoCourse.id)"
            >发布</el-button
          >
          <el-button
            type="primary"
            size="small"
            plain
            v-show="scope.row.videoCourse.status === 'Normal'"
            @click="unpublihCourse(scope.row.videoCourse.id)"
            >下架</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <router-link :to="'/info/' + scope.row.videoCourse.id">
            <el-button type="text">编辑</el-button>
          </router-link>

          <el-button
            type="text"
            @click="removeDataById(scope.row.videoCourse.id)"
            >删除</el-button
          >
          <router-link
            :to="
              '/chapter/' +
              scope.row.videoCourse.id +
              '/' +
              scope.row.videoCourse.subjectId +
              '/' +
              scope.row.videoCourse.gradeId +
              '/' +
              scope.row.videoCourse.kind
            "
          >
            <el-button type="success" plain>资源目录</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="width: 100%; text-align: center; margin-top: 10px">
      <el-pagination
        @size-change="sizeChange"
        @current-change="goto"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        style="float: right"
      >
      </el-pagination>
    </div>
  </div>
</template>
  <script>
import {
  getCourseList,
  getGrade,
  deleteCourseById,
  unpublihCourse,
  publihCourse,
  getCoursePlayCount
} from "@/api/edu/course";
import { getCategory } from "@/api/classification";
import { mapGetters } from "vuex";
import { tranNumber } from "@/utils/util.js"
import { getAllCompany } from "@/api/user";

export default {
  computed: {
    ...mapGetters(["companyId","roles"]),
  },
  data() {
    //定义变量和初始值
    return {
      listLoading: false, //表格加载状态
      showSearch: true, //展示搜索栏
      gradeList: null, //职级列表
      typeList: null, //类别列表
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      courseQuery: { title: "", subjectId: "", gradeId: "" }, //条件封装对象
      kindList: [
        { value: "0", label: "新型学徒" },
        {
          value: "1",
          label: "重点用工",
        },
        {
          value: "2",
          label: "技能提升",
        },
      ], //路线列表
      tranNumber: tranNumber, //数字转换
      companyList: [], //公司列表
      showCompany: false, //是否显示发布公司名称
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getGradeList();
    this.getCategoryList(this.companyId);
    //console.log(this.companyId);
    this.getList();
    //如果是超级管理员，则获取公司列表
    if (this.roles.includes("super")) {
      this.showCompany = true;
      getAllCompany().then((res) => {
        this.companyList = res.data.resList;
      });
    }else{
      this.showCompany = false;
    }
  },
  methods: {
    //获取课程列表
    getList() {
      this.listLoading = true;
      if (this.courseQuery.subjectId) {
        this.courseQuery.subjectId =
          this.courseQuery.subjectId[this.courseQuery.subjectId.length - 1]; //小类id
      }
      getCourseList(
        this.courseQuery,
        this.page,
        this.limit,
        this.companyId
      ).then((res) => {
        const data = res.data;
        this.total = data.total;
        this.list = data.rows;
        this.listLoading = false;
      });
    },
    //获取职级列表
    getGradeList() {
      getGrade().then((res) => {
        if (res.success) {
          this.gradeList = res.data.resList;
        }
      });
    },
    //获取类别列表
    getCategoryList() {
      getCategory(0, this.companyId).then((res) => {
        const data = res.data;
        this.typeList = this.deleteChildren(data.resList);
        // console.log(res);
      });
    },
    //删除类别列表中的空childrenList[]
    deleteChildren(arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].childrenList) {
          if (childs[i].childrenList.length) {
            this.deleteChildren(childs[i].childrenList);
          } else {
            delete childs[i].childrenList;
          }
        }
      }
      return arr;
    },
    //发布课程
    publihCourse(id) {
      publihCourse(id).then((res) => {
        if (res.success) {
          this.$message({
            type: "success",
            message: "发布成功!",
          });
          this.getList();
        }
      });
    },
    //下架课程
    unpublihCourse(id) {
      unpublihCourse(id).then((res) => {
        if (res.success) {
          this.$message({
            type: "success",
            message: "下架成功!",
          });
          this.getList();
        }
      });
    },
    //分页
    resetData() {
      //清空的方法
      //表单输入项数据清空
      this.courseQuery = {};
      //查询所有讲师数据
      this.getList();
    },
    //删除课程的方法
    removeDataById(courseid) {
      this.$confirm("此操作将永久删除课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //点击确定，执行then方法
        deleteCourseById(courseid).then((response) => {
          //提示信息
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新
          this.page = 1;
          this.getList();
        });
      }); //点击取消，执行catch方法
    },
    //添加课程
    addCourse() {
      this.$router.push({
        name: "AddCourse",
      });
    },
    //跳转页面
    goto: function (page) {
      this.page = page;
      this.getList();
    },
    //页码大小改变
    sizeChange: function (limit) {
      this.limit = limit;
      this.getList();
    },
  },
};
</script>
  